<template>
	<view>
		<view class="container">
			<!-- 顶部四个资产信息 -->
			<view class="asset-row">
				<view class="asset-item">
					<text class="label">Tx通证</text>
					<text class="value">{{detail.userWalletResponse.token}}</text>
				</view>
				<view class="asset-item">
					<text class="label">盲卡</text>
					<text class="value">{{detail.userWalletResponse.blindCard}}</text>
				</view>
				<view class="asset-item">
					<text class="label">碎片</text>
					<text class="value">{{detail.userWalletResponse.fragment}}</text>
				</view>
				<view class="asset-item">
					<text class="label">钥匙</text>
					<text class="value">{{detail.userWalletResponse.locks ||0}}</text>
				</view>
			</view>
			<view class="asset-row">
				<view class="asset-item">
					<text class="label">余额</text>
					<text class="value">{{detail.userWalletResponse.nowMoney}}</text>
				</view>
				<view class="asset-item">
					<text class="label">乐豆</text>
					<text class="value">{{detail.userWalletResponse.beans}}</text>
				</view>
				<view class="asset-item">
					<text class="label">当前价</text>
					<text class="value">{{detail.currencyExchangeRateResponse.tokenExchangeRate ||0}}</text>
				</view>
			</view>
		</view>
		<view class="tabs">
			<!-- Tab切换 -->
			<view class="tab-container">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: activeTab === index }" @click="switchTab(index)">
					{{ tab }}
					<view v-if="activeTab === index" class="tab-line"></view>
				</view>
			</view>

			<view class="form">
				<view class="form-item" v-if="activeTab === 0">
					<view class="input-title">
						<!-- <view class="icon-replace"></view> -->
						<text>通证兑换钥匙</text>
					</view>
					<input class="input" placeholder="输入钥匙数量" v-model="amount" />
				</view>
				<view class="form-item" v-if="activeTab === 1">
					<view class="input-title">
						<!-- <view class="icon-replace"></view> -->
						<text>乐豆兑换盲卡</text>
					</view>
					<input class="input" placeholder="输入盲卡数量" v-model="amount" />
				</view>
				<view class="form-item" v-if="activeTab === 2">
					<view class="input-title">
						<!-- <view class="icon-replace"></view> -->
						<text>碎片兑换盲卡</text>
					</view>
					<input class="input" placeholder="输入盲卡数量" v-model="amount" />
				</view>
				<view class="form-item">
					<view class="input-title">
						<text v-if="activeTab === 0">通证数</text>
						<text v-if="activeTab === 1">乐豆数</text>
						<text v-if="activeTab === 2">碎片数</text>
					</view>
					<view>{{getnum()}}</view>
				</view>
				<view class="protocol" v-if="activeTab === 1">
					<!-- <checkbox-group class="checkgroup acea-row" @change='isAgree=!isAgree' style="align-items: end;">
						<checkbox class="checkbox" :checked="isAgree ? true : false" />
						<text class="protocol_text">我已阅读并同意<text @click="userAgree"
								class="font_pro">《用户协议》</text></text>
					</checkbox-group> -->
					<image src="/static/blind/uxz.png" class="checkbox" v-if="isAgree" @click="onst"/>
					<image src="/static/blind/xz.png" class="checkbox" v-else @click="onst1"/>
					<view class="textbox">
						<text class="protocol_text">我已阅读并同意<text @click="userAgree" class="font_pro">《乐豆兑换盲盒协议》</text></text>
					</view>
				</view>
				<!-- <Agreement /> -->
				<button class="submit-btn" @click="subchange">立即兑换</button>
				<!-- <button class="submit-btn" style="background-color: #d2b380;" @click="subchange">盲盒竞猜</button> -->
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getinfoDetail,
		exchangeAdd
	} from '@/api/new.js';
	import Agreement from "@/components/agreement/index.vue"
	import {
		goToAgreement
	} from "@/libs/order";
	let app = getApp();
	export default {
		components: {
			Agreement
		},
		data() {
			return {
				activeTab: 0,
				tabs: ['钥匙', '乐豆兑盲卡', '碎片兑盲卡'],
				exchangeNum: 0,
				currentPrice: 1,
				id: 0,
				loading: false,
				detail: {},
				num: 0,
				amount: "",
				exchangeType: 1,
				isAgree: false,
				theme: app.globalData.theme,
			}
		},
		computed: {

		},
		onLoad(options) {
			let that = this
			that.id = options.id
			this.getdetail();
		},
		methods: {
			userAgree() {
				goToAgreement('exchangeBlindInfo')
			},
			getnum(item) {
				let mon = null
				if (this.activeTab === 0) {
					mon = this.detail.currencyExchangeRateResponse.locksExchangeRate * this.amount
				} else if (this.activeTab === 1) {
					mon = parseInt(this.detail.blindBox.beans) * this.amount
				} else {
					mon = parseInt(this.detail.blindBox.fragment) * this.amount
				}
				this.num = mon
				return mon
			},
			switchTab(index) {
				this.activeTab = index
				this.amount = ""
			},
			getdetail: function() {
				this.loading = true
				const id = this.id
				getinfoDetail(id).then((res) => {
					this.detail = res.data
					this.loading = false
				}).catch(err => {
					this.loading = false
				});
			},
			subchange: function() {
				let that = this
				console.log("this.isAgree", this.isAgree)
				if (that.amount === "") {
					that.$util.Tips({
						title: '请填写数量'
					});
					return
				}
				if (that.activeTab === 1 && !this.isAgree) {
					that.$util.Tips({
						title: '请勾选协议'
					});
					return
				}
				if (that.activeTab === 0) {
					that.submit(1)
				} else if (that.activeTab === 1) {
					that.submit(2)
				} else {
					that.submit(3)
				}
			},

			submit: function(type) {
        if(this.loading){
          return;
        }
				this.loading = true
				const data = {
					amount: this.num,
					blindBoxId: this.id,
					exchangeType: type,
					number: this.amount
				}
				exchangeAdd(data).then((res) => {
					if (res.code == 200) {
						this.$util.Tips({
							title: "成功"
						});
						this.getdetail()
						this.loading = false
					}
				}).catch(err => {
					console.log(err)
					this.$util.Tips({
						title: err
					});
					this.loading = false
				});
			},
			onagree: function(e) {
				this.isagree = e
				console.log()
			},
			onst(){
				this.isAgree = false
			},
			onst1(){
				this.isAgree = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		background: #e73224;
	}

	.protocol {
		margin: 30rpx 0;
		display: flex;
	}

	.protocol_text {
		.font_pro {
			color: #FF448F;
		}
	}

	.checkbox {
		width: 20px;
		height: 20px;
	}

	/* 顶部资产行 */
	.asset-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;

		.asset-item {
			flex: 1;
			text-align: center;
			color: #fff;

			.label {
				display: block;
				font-size: 13px;
				margin-bottom: 5px;
			}

			.value {
				font-size: 18px;
				color: #f79b6d;
				font-weight: bold;
			}
		}
	}

	.tabs {
		width: 90%;
		margin: 0 auto;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		position: relative;
		top: -20px;
	}

	/* Tab切换样式 */
	.tab-container {
		display: flex;
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 15px 0;
			position: relative;
			font-size: 14px;
			color: #666;

			&.active {
				color: #e73224;
				font-weight: bold;
			}

			.tab-line {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40px;
				height: 2px;
				background: #e73224;
			}
		}
	}

	/* 表单样式 */
	.form {
		background: #FFFFFF;
		padding: 40rpx 32rpx;

		.protocol_text {
			.font_pro {
				@include main_color(theme);
			}
		}
	}

	.form-item {
		margin-bottom: 48rpx;
	}

	.input-title {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		text {
			font-size: 14px;
			font-weight: 600;
		}
	}

	.icon-replace {
		width: 36rpx;
		height: 36rpx;
		background: #ddd;
		margin-right: 16rpx;
	}

	.input {
		height: 96rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 32rpx;
	}

	.fee-line {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
		border-top: 2rpx solid #eee;
	}

	/* 按钮样式 */
	.submit-btn {
		width: 100%;
		text-align: center;
		margin: 30rpx 0;
		margin-left: auto;
		margin-right: auto;
		background: #3a3a3a;
		color: #fff;
		border-radius: 50rpx;
		font-size: 34rpx;
		height: 96rpx;
		line-height: 96rpx;
		border: none;
	}
	.main_color {
		@include main_color(theme);
	}
</style>
